<%-- 
    Document   : detaill
    Created on : Dec 5, 2014, 12:07:56 AM
    Author     : Java
--%>
<%@page import="jamjun.infra.web.Json"%>
<%@page import="jsalon.cls.JJDate"%>
<%@page import="jsalon.resources.*"%>
<%@page import="jamjun.infra.web.el.*"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="Model" class="jsalon.web.vm.CustomerVM"  scope="session"/> 
<!--customer_detail-->


<div id="customer_detail_screen">
<div class="button-container" style=" text-align: right;">
    <%
        ELBtnOpt btnSave = new ELBtnOpt();
        btnSave.idAttr = "customer_detail_btnSave";
        btnSave.caption = buttonEnum.save.getString();
        btnSave.btnIcon = ELBtnIcon.save;
        btnSave.onClick = "";
        btnSave.styleAttr="width:80px;";
        out.println(ELHelper.jqBtn(btnSave));
    %>
    <%
        ELBtnOpt btnClose = new ELBtnOpt();
        btnClose.classAttr = "btnClose";
        btnClose.caption = buttonEnum.cancel.getString();
        btnClose.btnIcon = ELBtnIcon.cancel;
        btnClose.onClick = "";
        btnClose.styleAttr="margin-left:5px;";
        out.println(ELHelper.jqBtn(btnClose));
    %>
</div>
<!--<form id="customer_detail_form" name="customer_detail_form" action="" enctype="multipart/form-data">-->
<form id="customer_detail_form" action="">
<%
    ELTextboxOpt txtCode1 = new ELTextboxOpt();
    txtCode1.idAttr = "customer_detail_code";
    txtCode1.nameAttr = "data.uuid";
    txtCode1.textAlign = ELTextAlign.left;
    txtCode1.styleAttr= "display:none;";
    txtCode1.disable = true;
    out.println(ELHelper.textBox(Model.customer.uuid,txtCode1));
%>
<table style="width:100%;">
    <tr>
        <td style="width:160px;">
            <%
                ELImgOpt opt1 = new ELImgOpt();
                opt1.styleAttr = "width:150px; height:150px;";
                opt1.title = Model.customer.getCode();
                out.println(ELHelper.imag(Model.customer.getImage1(),Model.customer.getImage1(),"",opt1));
            %>
        </td>
        <td style="vertical-align: top;">
            <table style="width:500px;">
                <col style="width:135px;" />
                <col style="" />
                <!-- customer code-->
                <tr>
                    <td>
                        <% 
                            
                            ELLabelOpt lblOpt = new ELLabelOpt();
                            lblOpt.textAlign = ELTextAlign.right;
                            lblOpt.styleAttr="width:100%;";
                            out.println(ELHelper.label(captionEnum.customerCode.getString() +" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <%
                        ELTextboxOpt txtCode = new ELTextboxOpt();
                        txtCode.idAttr = "customer_detail_code";
                        txtCode.nameAttr = "data.code";
                        txtCode.textAlign = ELTextAlign.left;
                        txtCode.disable = true;
                        out.println(ELHelper.textBox(Model.customer.code,txtCode));
                        %>
                    </td>
                </tr>
                <!--name-->
                <tr>
                    <td>
                        <% 
                            lblOpt = new ELLabelOpt();
                            lblOpt.textAlign = ELTextAlign.right;
                            lblOpt.styleAttr="width:100%;";
                            out.println(ELHelper.label(captionEnum.name.getString()+" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <%
                        ELTextboxOpt txtOpt2 = new ELTextboxOpt();
                        txtOpt2.nameAttr = "data.name";
                        txtOpt2.styleAttr="width:90%";
                        txtOpt2.idAttr = "customer_detail_code";
                        txtOpt2.isValidateEmpty = true;
                        out.println(ELHelper.textBox(Model.customer.name,txtOpt2));
                        %>
                    </td>
                </tr>
                <!-- Gender-->
                <tr>
                    <td>
                        <% 
                            lblOpt = new ELLabelOpt();
                            lblOpt.textAlign = ELTextAlign.right;
                            lblOpt.styleAttr="width:100%;";
                            out.println(ELHelper.label(captionEnum.gender.getString() +" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <%
                        ELSelectOpt selOpt = new ELSelectOpt();
                        selOpt.nameAttr = "data.gender";
                        selOpt.idAttr = "customer_gender";
                        selOpt.styleAttr="width:150px;";
                        selOpt.isValidateEmpty = true;
                        Json data = new jsalon.cls.SelectList().GetGender(Model.customer.gender.toString(),SelectCaption.pleaseSelect);
                        out.println(ELHelper.select(Model.customer.gender.toString(),selOpt,data));
                        %>
                    </td>
                </tr>
                <!-- birth Date -->
                <tr>
                    <td>
                        <% 
                            lblOpt = new ELLabelOpt();
                            lblOpt.styleAttr="width:100%;";
                            lblOpt.textAlign = ELTextAlign.right;
                            out.println(ELHelper.label(captionEnum.gender.birthDate.getString()+" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <% 
                        ELDatePickerOpt dpOpt = new ELDatePickerOpt();
                        dpOpt.onChange = "";
                        dpOpt.nameAttr = "data.birthDate";
                        dpOpt.idAttr = "customer_detail_birthDate";
                        dpOpt.isValidateEmpty = true;
                        out.println(ELHelper.datePicker(Model.customer.birthDate,dpOpt));
                        %>
                    </td>
                </tr>
<!--                id card-->
                <tr>
                    <td>
                        <% 
                            lblOpt = new ELLabelOpt();
                            lblOpt.styleAttr="width:100%";
                            lblOpt.textAlign = ELTextAlign.right;
                            out.println(ELHelper.label(captionEnum.idCard.getString()+" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <% 
                        ELTextboxOpt txtOpt3 = new ELTextboxOpt();
                        txtOpt3.nameAttr = "data.idCard";
                        txtOpt3.styleAttr="width:90%";
                        txtOpt3.idAttr = "customer_detail_code";
                        out.println(ELHelper.textBox(Model.customer.idCard,txtOpt3));
                        %>
                    </td>
                </tr>
                <!-- Register Date-->
                <tr>
                    <td>
                        <% 
                            lblOpt = new ELLabelOpt();
                            lblOpt.styleAttr="width:100%";
                            lblOpt.textAlign = ELTextAlign.right;
                            out.println(ELHelper.label(captionEnum.registerDate.getString()+" : ",lblOpt));
                        %>
                    </td>
                    <td>
                        <% 
                        ELTextboxOpt txtOpt4 = new ELTextboxOpt();
                        txtOpt4.nameAttr = "data.registerDate";
                        txtOpt4.styleAttr="width:80px;";
                        txtOpt4.idAttr = "customer_detail_code";
                        txtOpt4.disable = true;
                        out.println(ELHelper.textBox(JJDate.ConvertToStrDate(Model.customer.registerDate),txtOpt4));
                        %>
                    </td>
                </tr>
            </table>
        </td>
        
    </tr>
</table>
</form>                    
</div>
${Model.customer.birthDate}
<script type="text/javascript">
    $(body).ready(function(){
        $("#customer_detail_form").ValidateUI({
            "checkAllBy" : "#customer_detail_btnSave" // event จะไปจับที่ปุ่มนั้นโดยการ click
        });
        $("#customer_detail_screen").initialUI();
        $("#customer_detail_screen").imageBox({isOnMouseOver:true});
        customer_detail_Event();
    });
    function customer_detail_Event()
    {
        $("#customer_detail_btnSave").click(function(){
            customer_detail_Save();
        });
    }
    function customer_detail_Save() {
        var dataSend = { 'actionType': '<%=Model.actionType %>' };
        var options = {
            URL_Save: 'customer?[ac]=save',  // Url สำหรับ Save
            ExtraData: dataSend,   //ข้อมุลพิเศษที่ไม่ได้เกิดจาก form
            Type: 'post',
            Target: '_self',
            URL_SuccesReLoad: "customer_detail_SaveComplete",   // Url Reload จะใส่ ID ให้เมื่อ save ผ่าน แล้ว reload กลับไปหน้าเดิม
            URL_SuccessRedirectPage: "", //Url save ผ่านแล้ว ไปไหน
            CallBackUnSeccess: "",
            CallBackFunction: "",
            IsShowDlgList: false
        };
        $("form#customer_detail_form").transction_Submit(options);
    }
    function customer_detail_SaveComplete(data){
        try{
            customer_List();
        }catch(e){
            console.log(e.toString());
        }
    }
</script>